<template>
  <div>
    <!-- 头 -->
    <top></top>
    <!-- 上 -->
    <div class="main">
      <div class="upper">
        <div class="upper-left">
          <div class="tytop">质量</div>
          <div class="upper-left-bm">
            <div class="upper-left-bm-tp">
              <Meter :aqi="aqi || 0" :quality="quality"></Meter>

              <div class="upper-pm">
                <div class="spm">
                  市排名: <span class="spm-h">{{ rank }}</span>
                </div>
                <div class="major" style="margin-top: 8px">
                  首要污染物: <span>{{ primary_pollutant }}</span>
                </div>
                <div class="xian"></div>
                <div class="nd">年度污染物贡献 :</div>
                <div class="box" style="display: flex; margin-top: 10px">
                  <div class="bfb">o3({{ o3 | zh }})</div>
                  &nbsp;&nbsp;&nbsp;
                  <!-- <div class="bfb">no2({{ no2 | zh }})、so2({{ so2 | zh }})</div> -->
                  <div class="bfb">pm2.5({{ pm2_5 | zh }})</div>
                </div>
              </div>
            </div>
            <div class="ltbw">
              <div class="left">
                <p>{{ excellentTarget }}</p>
                <p>优良目标(天)</p>
              </div>
              <div class="right">
                <p>{{ excellentComplete }}</p>
                <p>已完成(天)</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 右 -->
        <div class="upper-right">
          <div class="tytop">感知元</div>
          <div class="zhand-main">
            <div class="zm-lf">
              <div class="monitor-water bz">
                <div class="monitor-left">标准站</div>
                <div class="monitor-rigin">
                  <div class="ddiv">
                    <div class="sz">{{ nationSite || 0 }}</div>
                    <div class="hl">国控(个)</div>
                  </div>
                  <div class="ddiv">
                    <div class="sz">{{ provinceSite || 0 }}</div>
                    <div class="hl">省控(个)</div>
                  </div>
                  <div class="ddiv">
                    <div class="sz">{{ citySite || 0 }}</div>
                    <div class="hl">市控(个)</div>
                  </div>
                  <div class="ddiv">
                    <div class="sz">{{ country || 0 }}</div>
                    <div class="hl">区控(个)</div>
                  </div>
                </div>
              </div>
              <div class="monitor-water">
                <div class="monitor-left">微站</div>
                <div class="monitor-rigin">
                  <div class="ddiv">
                    <div class="sz">{{ tinycity || 0 }}</div>
                    <div class="hl">市控(个)</div>
                  </div>
                  <div class="ddiv">
                    <div class="sz">{{ countyMicro || 0 }}</div>
                    <div class="hl">区控(个)</div>
                  </div>
                  <div class="ddiv">
                    <div class="sz">{{ tinytower || 0 }}</div>
                    <div class="hl">城区覆盖(公里/点)</div>
                  </div>
                  <div class="ddiv">
                    <div class="sz">{{ tinyvillage || 0 }}</div>
                    <div class="hl">乡镇覆盖(公里/点)</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="zm-rg">
              <div class="boxa box1">
                <div class="zm-rg-sz">{{ countyBurn || 0 }}</div>
                <div class="zm-rg-zw">秸秆焚烧监控视频(个)</div>
              </div>
              <div class="boxa">
                <div class="zm-rg-sz">{{ monitor || 0 }}</div>
                <div class="zm-rg-zw">监测车(台)</div>
              </div>
              <div class="boxa">
                <div class="zm-rg-sz">{{ radar || 0 }}</div>
                <div class="zm-rg-zw">雷达(台)</div>
              </div>
              <div class="boxa box4">
                <div class="zm-rg-sz">{{ organics || 0 }}</div>
                <div class="zm-rg-zw">挥发性有机物(个)</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 下 -->
      <div class="below">
        <div class="below-left">
          <div class="tytop">大气污染源</div>
          <Source
            :twodirt="[
              twodirt,
              industrial,
              polluteVOCs,
              construction1,
              catering,
              move,
            ]"
          ></Source>
        </div>
        <div class="below-centen">
          <div style="margin-bottom: 0.125rem" class="tytop">污染物排放</div>
          <div class="discharge-bm">
            <!-- 许可量 -->
            <div class="allow">
              <div class="allow-title">许可量/排放量(今年)</div>
              <Allow
                :data="[goVOCs, goSO2, goNOx]"
                :data2="[nowVOCs, nowSO2, nowNOx]"
                :data4="[pfnowVOCs, pfnowSO2, pfnowNOx]"
              ></Allow>
            </div>
            <!-- 排放量 -->
            <div class="displacement">
              <div class="displacement-title">许可量/排放量(去年)</div>
              <Discharge
                :data="[goVOCs, goSO2, goNOx]"
                :data3="[pfgoVOCs, pfgoSO2, pfgoNOx]"
                py
              ></Discharge>
            </div>
          </div>
        </div>

        <div class="below-right">
          <div class="tytop">本年度报警巡查</div>
          <div class="tytop-main">
            <div style="display: flex; margin-top: 0.15rem">
              <div class="tytop-gy tytop-gy1">
                <div class="tytop-sz">{{ monitorWarn | Statistic1 }}</div>
                <div class="tytop-zw">污染监测报警(条)</div>
              </div>
              <div class="tytop-gy">
                <div class="tytop-sz">{{ warnPatrol | Statistic1 }}</div>
                <div class="tytop-zw">AI告警(条)</div>
              </div>
            </div>
            <div style="display: flex; margin-top: 0.5rem">
              <div class="tytop-gy tytop-gy1">
                <div class="tytop-sz">{{ deviceWarn | Statistic1 }}</div>
                <div class="tytop-zw">设备报警(条)</div>
              </div>
              <div class="tytop-gy">
                <div class="tytop-sz">{{ devicePatrol | Statistic1 }}</div>
                <div class="tytop-zw">设备报警巡查(条)</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

<!--    <Bottom></Bottom>-->
  </div>
</template>

<script>
import flexble from "@/utils/index";
import Meter from "@/components/echarts/meter.vue";
import Top from "@/components/top/Top.vue";
import Bottom from "@/components/bottom/Bottom.vue";
import Source from "@/components/echarts/source/Source.vue";
import Allow from "@/components/echarts/pollution/Allow.vue";
import Discharge from "@/components/echarts/pollution/Discharge.vue";
import { getnum } from "@/api/atmosphere";
import { instance } from "@/utils/request";

// const Qs =require('qs')
// console.log('Qs',Qs);
export default {
  components: {
    Top,
    Bottom,
    Source,
    Allow,
    Discharge,
    Meter,
  },
  name: "Gas",
  data() {
    return {
      country: "",
      tinycity: "",
      tinytower: "",
      tinyvillage: "",
      monitor: "",
      radar: "",
      organics: "",
      citySite: "",
      countyBurn: "",
      countyMicro: "",
      nationSite: "",
      provinceSite: "",
      construction1: "",

      devicePatrol: "",
      deviceWarn: "",
      monitorWarn: "",
      warnPatrol: "",

      /* 空气 */
      aqi: "",
      rank: "",
      primary_pollutant: "",
      quality: "",
      o3: "",
      co: "",
      no2: "",
      so2: "",
      pm10: "",
      pm2_5: "",
      excellentComplete: "",
      excellentTarget: "",
      /* 大气污染 */
      twodirt: "",
      industrial: "",
      polluteVOCs: "",

      catering: "",
      move: "",

      /* 许可量 */
      goNOx: "",
      nowNOx: "",
      goSO2: "",
      nowSO2: "",
      goVOCs: "",
      nowVOCs: "",
      /* 排放量 */
      pfgoNOx: "",
      pfnowNOx: "",
      pfgoSO2: "",
      pfnowSO2: "",
      pfgoVOCs: "",
      pfnowVOCs: "",
    };
  },
  methods: {
    /* 是 */
    // 标准
    // 标准站区控

    async bz() {
      var that = this;
      instance
        .get("/airEcology/api/intelligentEcology/pointstatistic")
        .then((res) => {
          let { citySite, countyBurn, countyMicro, nationSite, provinceSite } =
            res.data.data;
          that.citySite = citySite;
          that.countyBurn = countyBurn;
          that.countyMicro = countyMicro;
          that.nationSite = nationSite;
          that.provinceSite = provinceSite;
        });
    },
    //  空气
    async kq() {
      var that = this;
      instance
        .get("/airEcology/api/intelligentEcology/airquality")
        .then((res) => {
          let { aqi, primary_pollutant, quality, rank, proportion } =
            res.data.data;
          let { co, no2, pm2_5, pm10, so2, o3 } = proportion;

          that.o3 = o3;
          that.co = co;
          that.no2 = no2;
          that.so2 = so2;
          that.pm2_5 = pm2_5;
          that.pm10 = pm10;
          that.aqi = aqi;
          that.rank = rank;
          that.primary_pollutant = primary_pollutant;
          that.quality = quality;
          // this.provinceSite=provinceSite
        });
    },
    // 天数
    async ts() {
      var that = this;
      instance
        .get("/airEcology/api/intelligentEcology/checktarget")
        .then((res) => {
          let { excellentComplete, excellentTarget } = res.data.data;

          that.excellentComplete = excellentComplete;
          that.excellentTarget = excellentTarget;
        });
    },
    // 巡查
    async xc() {
      var that = this;
      instance
        .get("/airEcology/api/intelligentEcology/warnpatrol")
        .then((res) => {
          let { devicePatrol, deviceWarn, monitorWarn, warnPatrol } =
            res.data.data;

          that.devicePatrol = devicePatrol;
          that.deviceWarn = deviceWarn;
          that.monitorWarn = monitorWarn;
          that.warnPatrol = warnPatrol;
        });
    },
    // 标准站区控
    async standardDistrict() {
      try {
        let res = await getnum({
          restypeid: 1104,
        });

        this.country = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 微站市控
    async tinyCity() {
      try {
        let res = await getnum({
          restypeid: 1201,
        });
        this.tinycity = res.data;
        // this.tinycity = 20;
      } catch (err) {
        console.log(err);
      }
    },
    // 微站城区
    async tinyTower() {
      try {
        let res = await getnum({
          restypeid: 1203,
        });
        this.tinytower = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 微站乡镇
    async tinyVillage() {
      try {
        let res = await getnum({
          restypeid: 1204,
        });
        this.tinyvillage = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 监测车
    async Monitor() {
      try {
        let res = await getnum({
          restypeid: 1302,
        });
        this.monitor = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 雷达
    async Radar() {
      try {
        let res = await getnum({
          restypeid: 1303,
        });
        this.radar = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 有机物
    async Organics() {
      try {
        let res = await getnum({
          restypeid: 1304,
        });
        this.organics = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    /* 大气污染源 */
    // 二污普
    async twoDirt() {
      try {
        let res = await getnum({
          restypeid: 1401,
        });
        this.twodirt = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 工业
    async Industrial() {
      try {
        let res = await getnum({
          restypeid: 1402,
        });
        this.industrial = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // VOCs
    async PolluteVOCs() {
      try {
        let res = await getnum({
          restypeid: 1403,
        });
        this.polluteVOCs = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 工地
    async construCtion2() {
      try {
        let res = await getnum({
          restypeid: 1404,
        });
        this.construction1 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 餐饮
    async caterIng() {
      try {
        let res = await getnum({
          restypeid: 1405,
        });
        this.catering = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 移动
    async Move() {
      try {
        let res = await getnum({
          restypeid: 1406,
        });
        this.move = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    /* 许可量 */
    //  NOx
    async gonOx() {
      try {
        let res = await getnum({
          restypeid: 1501,
        });

        this.goNOx = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async nownOx() {
      try {
        let res = await getnum({
          restypeid: 1502,
        });
        this.nowNOx = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    //  SO2
    async GoSO2() {
      try {
        let res = await getnum({
          restypeid: 1503,
        });
        this.goSO2 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async NowSO2() {
      try {
        let res = await getnum({
          restypeid: 1504,
        });
        this.nowSO2 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // VOCs
    async govOCs() {
      try {
        let res = await getnum({
          restypeid: 1505,
        });
        this.goVOCs = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async nowvOCs() {
      try {
        let res = await getnum({
          restypeid: 1506,
        });
        this.nowVOCs = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    /* 排放量 */
    //  NOx
    async pfgonOx() {
      try {
        let res = await getnum({
          restypeid: 1601,
        });

        this.pfgoNOx = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async pfnownOx() {
      try {
        let res = await getnum({
          restypeid: 1602,
        });
        this.pfnowNOx = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    //  SO2
    async pfGoSO2() {
      try {
        let res = await getnum({
          restypeid: 1603,
        });
        this.pfgoSO2 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async pfNowSO2() {
      try {
        let res = await getnum({
          restypeid: 1604,
        });
        this.pfnowSO2 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // VOCs
    async pfgovOCs() {
      try {
        let res = await getnum({
          restypeid: 1605,
        });
        this.pfgoVOCs = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async pfnowvOCs() {
      try {
        let res = await getnum({
          restypeid: 1606,
        });
        this.pfnowVOCs = res.data;
      } catch (err) {
        console.log(err);
      }
    },
  },

  async created() {
    /* 是 */
    this.bz();
    this.kq();
    this.ts();
    this.xc();
    await this.standardDistrict();
    await this.tinyCity();
    await this.tinyTower();
    await this.tinyVillage();
    await this.Monitor();
    await this.Radar();
    await this.Organics();
    /* 大气污染 */
    await this.twoDirt();
    await this.Industrial();
    await this.PolluteVOCs();
    await this.construCtion2();
    await this.caterIng();
    await this.Move();
    /* 许可量 */
    await this.gonOx();
    await this.nownOx();
    await this.GoSO2();
    await this.NowSO2();
    await this.govOCs();
    await this.nowvOCs();
    /* 排放量 */
    await this.pfgonOx();
    await this.pfnownOx();
    await this.pfGoSO2();
    await this.pfNowSO2();
    await this.pfgovOCs();
    await this.pfnowvOCs();
  },
  filters: {
    // 千分位
    Statistic1(num) {
      num = parseFloat(Number(num).toFixed(3));
      let [integer, decimal] = String.prototype.split.call(num, ".");
      integer = integer.replace(/\d(?=(\d{3})+$)/g, "$&,"); // 正则先行
      return `${integer}${decimal ? "." + decimal : ""}`;
    },
    zh(point) {
      var str = Number(point * 100).toFixed(0);
      str += "%";
      return str;
    },
  },
};
</script>

<style lang="less" scoped>
/* 自定义字体   */
@font-face {
  /* font-properties */
  font-family: elect2;
  src: url("../../assets/tfxq/typeface/din-bold_.otf"); /* IE9 */
}
.main {
  padding: 0.25rem 0.9625rem 0rem 0.9625rem;
}

.upper {
  display: flex;

  .upper-left {
    background: rgba(0, 0, 0, 0.14);
    margin-right: 0.25rem;
    height: 3.75rem;
    flex: 1;

    .upper-left-bm {
      padding: 0.25rem 0.125rem 0px;
      background-color: rgba(28, 40, 66, 0.3);

      .ltbw {
        font-size: 14px;
        height: 0.8875rem;
        width: 100%;
        margin-top: 0.1875rem;
        margin-bottom: 0.1875rem;

        text-indent: 0.1875rem;
        background-color: #1b2e51;
        color: #65cad5;
        display: flex;
        justify-content: space-between;
        .left {
          width: 50%;
          height: 100%;
          text-align: center;
          p:nth-child(1) {
            font-family: elect2;
            font-weight: 700;
            font-size: 0.25rem;
            color: #12cd52;
          }
          p {
            margin-top: 5px;
          }
        }
        .right {
          width: 50%;
          height: 100%;
          text-align: center;
          p:nth-child(1) {
            font-family: elect2;
            font-weight: 700;
            font-size: 0.25rem;
            color: #fbdb2c;
          }
          p {
            margin-top: 5px;
          }
        }
      }

      .upper-left-bm-tp {
        display: flex;
        height: 100%;

        .upper-pm {
          color: #8acffa;
          font-size: 14px;
          .nd {
            letter-spacing: 1px;
          }
          .spm {
            letter-spacing: 1px;
          }

          .spm-h {
            margin-left: 0.025rem;
            color: #34e4a0;
            font-size: 0.3rem;
            font-weight: 700;
          }

          .xian {
            margin-top: 0.1875rem;
            margin-bottom: 0.1875rem;
            border: 1px dashed #285c91;
          }

          .bfb {
            letter-spacing: 1px;
            font-size: 14px;
            color: #fbdb2c;
          }
        }

        .major {
          letter-spacing: 1px;
          span {
            color: #fbdb2c;
            margin-left: 0.025rem;
          }
        }
      }

      .upper-pm {
        flex: 1;
      }
    }
  }

  .upper-right {
    background: rgba(0, 0, 0, 0.14);
    height: 3.75rem;
    flex: 3;

    .zhand-main {
      display: flex;
      padding: 0.25rem;

      .zm-lf {
        flex: 2;
      }

      .zm-rg {
        display: flex;
        background-color: rgba(29, 49, 84, 0.7);
        flex-wrap: wrap;
        padding: 0.125rem;
        // height: 3.375rem;
        margin-left: 0.25rem;
        flex: 1;

        .boxa {
          text-align: center;

          width: 2.5rem;

          // height: 1.5625rem;
          .zm-rg-sz {
            margin-top: 0.3125rem;
            color: #46ecde;
            font-size: 0.3rem;
            font-family: elect2;
          }

          .zm-rg-zw {
            margin-top: 0.0625rem;
            color: #7ab9e2;
          }
        }
      }
    }
  }
}

.below {
  display: flex;
  // height: 5rem;
  margin-top: 0.25rem;

  .below-left {
    flex: 2;
    background: rgba(0, 0, 0, 0.14);
  }

  .below-centen {
    background: rgba(0, 0, 0, 0.14);
    flex: 2;
    margin-left: 0.25rem;
    margin-right: 0.25rem;

    .discharge-bm {
      display: flex;
      padding: 0.125rem;

      .allow,
      .displacement {
        flex: 1;

        .allow-title,
        .displacement-title {
          font-size: 0.2rem;
          color: #a6dcff;
          text-align: center;
        }
      }
    }
  }

  .below-right {
    background: rgba(0, 0, 0, 0.14);
    flex: 1;

    .tytop-main {
      padding: 0.25rem 0.125rem;

      .tytop-gy1 {
        margin-right: 0.4375rem;
      }

      .tytop-gy2 {
        margin-top: 0.5rem;
      }

      .tytop-gy {
        width: 1.8rem;
        height: 1.625rem;
        text-align: center;
        background: url(../../assets/tfxq/imgs/patrol.png) no-repeat top center;
        background-size: 100% 100%;

        .tytop-sz {
          margin-top: 0.4375rem;
          font-weight: bold;
          font-family: elect2;
          font-size: 0.35rem;
          color: #f5a840;
        }

        .tytop-zw {
          margin-top: 0.125rem;
          color: #77c8ee;
        }
      }
    }
  }
}

.box4 {
  border-left: 1px solid #213c6b;
  border-top: 1px solid #213c6b;
}

.box1 {
  border-bottom: 1px solid #213c6b;
  border-right: 1px solid #213c6b;
}

.bz {
  margin-bottom: 0.3rem;
}

.monitor-water {
  display: flex;
  // height: 1.45rem;

  .monitor-left {
    color: #a5d8fa;
    width: 1.425rem;
    text-align: center;
    line-height: 1.325rem;
    background-color: rgba(32, 86, 158, 0.3);
    font-size: 16px;
  }

  .monitor-rigin {
    display: flex;
    width: 100%;
    background-color: rgba(29, 49, 84, 0.7);
    justify-content: space-evenly;

    .ddiv {
      width: 24%;
      text-align: center;
      margin-top: 0.3125rem;

      .sz {
        font-size: 0.3rem;
        color: #eaf172;
        font-weight: bold;
        font-family: elect2;
        text-align: center;
      }

      .hl {
        width: 100%;
        margin-top: 0.0625rem;
        color: #7bb9e2;
        text-align: center;
      }
    }
  }
}

.tytop {
  height: 0.4rem;
  letter-spacing: 1px;
  background: -webkit-linear-gradient(left, #1e3593, #1b2848);
  color: #9fcaf5;
  font-size: 0.175rem;
  line-height: 0.375rem;
  text-indent: 0.2rem;
}

.aa {
  width: 3.75rem;
  height: 0.625rem;
  background: red;
}
</style>
